<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About us</title>
    <link rel="stylesheet" href="../css/animate.min.css">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/swiper-bundle.css">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/commond.css">
    <!-- <link rel="stylesheet" href="../css/HOME.css"> -->
    <link rel="stylesheet" href="../css/about.css">
</head>

<body>
    <label href="" id="ttoopp" style="opacity: 0;position: absolute;"></label>

    <header>
        <nav class="navbar menu">
            <div class="container  box1">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                      <span class="sr-only">Toggle navigation</span>
                      <span class="icon-bar span"></span>
                      <span class="icon-bar span"></span>
                      <span class="icon-bar span"></span>
                    </button>
                    <a class="navbar-brand logo" href="../index.html">Dog Home</a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">


                    <ul class="nav navbar-nav navbar-right ull">
                        <li><a href="../index.html">HOME</a></li>
                        <li class="active"><a href="about.html">About us</a></li>
                        <li><a href="gallery.html">Gallery</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                            <ul class="dropdown-menu ddd">
                                <li class="llii"><a href="blog.html">Blog</a></li>
                                <li class="llii"><a href="#">What We do</a></li>
                                <li class="llii"><a href="#">Testimonials</a></li>
                            </ul>
                        </li>
                        <li><a href="contant_us.html">Content us</a></li>
                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container-fluid -->
        </nav>
    </header>


    <div class="about-box1">
        <div class="container">
            <div class="row ab-box2">
                <h3 class="">About Us</h3>
                <div class="col-lg-6 col-md-6" style="animation-delay: .5s;">
                    <div class="col-lg-6 col-md-6 col-sm-6 ab-box3">
                        <img src="../images/wh1.jpg" alt="" class="img-fluid">
                        <h3>Leash Training</h3>
                        <p>Sit amet mattis quam, sit amet excepteur sint occaecat cupidatat.</p>
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-6 ab-box3">
                        <img src="../images/wh4.jpg" alt="" class="img-fluid">
                        <h3>House & Crate</h3>
                        <p>Sit amet mattis quam, sit amet excepteur sint occaecat cupidatat.</p>

                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-6 ab-box3">
                        <img src="../images/wh2.jpg" alt="" class="img-fluid">
                        <h3>Clicker Training</h3>
                        <p>Sit amet mattis quam, sit amet excepteur sint occaecat cupidatat.</p>

                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-6 ab-box3">
                        <img src="../images/wh3.jpg" alt="" class="img-fluid">
                        <h3>Basic Commands</h3>
                        <p>Sit amet mattis quam, sit amet excepteur sint occaecat cupidatat.</p>

                    </div>
                </div>
                <div class="col-lg-6 col-md-6" style="animation-delay: .5s;">
                    <img src="../images/ab.png" alt="" style="width: 100%;">
                </div>

            </div>
        </div>
    </div>


    <div class="home-six-box ">
        <div class="container ">
            <div class="six-box ">
                <h3>Testimonials</h3>
                <div class="row ">
                    <div class="col-md-4 col-sm-4 six-box2 ">
                        <p>"Sed ut perspiciatis unde omnis iste natus error sit volup tatem accus antium dolore tium.</p>
                        <img src="../images/te1.jpg" class="img-fluid" alt="">
                        <h3> - Lorem Ipsum</h3>
                    </div>
                    <div class="col-md-4 col-sm-4 six-box2 ">
                        <p>"Sed ut perspiciatis unde omnis iste natus error sit volup tatem accus antium dolore tium.</p>
                        <img src="../images/te2.jpg" class="img-fluid" alt="">
                        <h3> - Lorem Ipsum</h3>
                    </div>
                    <div class="col-md-4 col-sm-4 six-box2 ">
                        <p>"Sed ut perspiciatis unde omnis iste natus error sit volup tatem accus antium dolore tium.</p>
                        <img src="../images/te3.jpg" class="img-fluid" alt="">
                        <h3> - Lorem Ipsum</h3>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="about-box2">
        <div class="container">
            <div class="ab-title">
                <h3>Dog Trainers</h3>
                <div class="row">
                    <div class=" col-lg-3 col-md-3 col-sm-6">

                        <img src="../images/t1.png" class="img-fluid" alt="">

                        <div class="title1">
                            <h4>Mark Henry</h4>
                            <ul>
                                <li>
                                    <a href="#" style="color: rgb(59, 89, 152);"></a>
                                </li>
                                <li>
                                    <a href="#" style="padding: 0 15px;"></a>
                                </li>
                                <li>
                                    <a href="#" style="color: rgb(244, 67, 54);"></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class=" col-lg-3 col-md-3 col-sm-6 ">

                        <img src="../images/t2.png" class="img-fluid" alt="">

                        <div class="title1">
                            <h4>Ronda Lusi</h4>
                            <ul>
                                <li>
                                    <a href="#" style="color: rgb(59, 89, 152);"></a>
                                </li>
                                <li>
                                    <a href="#" style="padding: 0 15px;"></a>
                                </li>
                                <li>
                                    <a href="#" style="color: rgb(244, 67, 54);"></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class=" col-lg-3 col-md-3 col-sm-6 ">

                        <img src="../images/t3.png" class="img-fluid" alt="">

                        <div class="title1">
                            <h4>Brie Billa</h4>
                            <ul>
                                <li>
                                    <a href="#" style="color: rgb(59, 89, 152);"></a>
                                </li>
                                <li>
                                    <a href="#" style="padding: 0 15px;"></a>
                                </li>
                                <li>
                                    <a href="#" style="color: rgb(244, 67, 54);"></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class=" col-lg-3 col-md-3 col-sm-6 ">

                        <img src="../images/t4.png" class="img-fluid" alt="">

                        <div class="title1">
                            <h4>Mark Henry</h4>
                            <ul>
                                <li>
                                    <a href="#" style="color: rgb(59, 89, 152);"></a>
                                </li>
                                <li>
                                    <a href="#" style="padding: 0 15px;"></a>
                                </li>
                                <li>
                                    <a href="#" style="color: rgb(244, 67, 54);"></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <footer>
        <div class="container">
            <div class="row">
                <div class="col-md-5 col-sm-5">
                    <div class="row">
                        <div class="col-lg-6 col-md-12 col-sm-12 foot-box">
                            <h2>About Us</h2>
                            <p>Sed ut perspiciatis unde omnis iste natus error sit.Error sit antium dolorts remq hymue laud.</p>
                        </div>
                        <div class="col-lg-6 col-md-12 col-sm-12 foot-box">
                            <h2>Who We Are</h2>
                            <p>Error sit antium dolorts remq hymue laud.Sed ut perspiciatis unde omnis iste natus error sit.</p>
                        </div>
                    </div>
                </div>

                <div class="col-md-3 col-sm-3 foot-box phone">
                    <h2>Contact Us</h2>
                    <h4>Phone</h4>
                    <p>+121 098 8907 9987</p>
                    <h4>Email </h4>
                    <p><a href="#">info@example.com</a></p>
                    <h4>Location</h4>
                    <p>Honey Avenue, New York City</p>
                </div>

                <div class="col-md-4  col-sm-4 foot-box">
                    <h2>Newsletter</h2>
                    <p>Be the first to get latest news and offers!
                        <br> Sed ut perspiciatis unde omnis.</p>
                    <form class="form">
                        <input type="email" placeholder="Enter your email...">
                        <button type="submit" class="btnn">Submit</button>
                    </form>
                    <h2>Connect With Social</h2>
                    <a href=""> <span class="glyphicon glyphicon-earphone"></span></a>
                    <a href=""> <span class="glyphicon glyphicon-camera"></span></a>

                    <a href=""> <span class="glyphicon glyphicon-briefcase"></span></a>

                    <a href=""> <span class="glyphicon glyphicon-tree-deciduous"></span></a>

                </div>
            </div>
        </div>
    </footer>
    <div class="company ">
        <p> © 2022 Dog Home. All rights reserved | Design by HUAHang</p>
    </div>
    <a href="#ttoopp" id="top-btn" class="glyphicon glyphicon-arrow-up" title="返回顶部"></a>

</body>

</html>

<script src="../js/jquery.js "></script>
<script src="../js/bootstrap.min.js "></script>
<script src="../js/swiper-bundle.js "></script>
<script src="../js/wow.min.repeat.js "></script>
<script>
    var mySwiper = new Swiper('.swiper', {

        pagination: {
            el: '.swiper-pagination',
            clickable: true,

        },

        autoplay: {
            delay: 2500,
            stopOnLastSlide: false,
            disableOnInteraction: true,
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },

    })
</script>
<script>
    new WOW().init();
</script>